<template>
    <div class="detail">
        <div class="info" v-if="info">
            <img :src="info.goodsImg" alt="">
            <p class="name  ">{{ info.goodsName }}</p>
            <p class="price">{{ info.goodsPrice }}</p>
        </div>

        <div>
            <button @click="addToShoppingCar">加入购物车</button>
        </div>

        <br>
        <br>
        <br>
        <br>
        <br>


        <!-- 
            问题: 点击猜你喜欢的商品时,也是跳转详情页对应的路由 ->  自己跳自己 -> 组件会复用,不会触发当前页面组件的初始化阶段 -> 视图不会更新

            怎么解决?   
            虽然自己跳自己 -> 组件会复用 -> 但是数据还是改变了 -> 可以监听$route改变

         -->


        <div>
            <h3>猜你喜欢</h3>
            <router-link :to="{name:'detail-copy',params:{gid:'100016799352',a:1,b:2}}">
             红米 note9
           </router-link>   |   
           <router-link :to="{name:'detail-copy',params:{gid:'100011530887',a:1,b:2}}">
            RedmiBookPro15锐龙版
           </router-link>
        </div>
    </div>
</template>

<script>
// 单文件组件 -> 一个.vue文件就是一个组件 (template script style)
// @ is an alias to /src

import axios from '@/utils/request';

export default {
    name: 'DetailCopyView',
    data() {

        // 登录成功之后将昵称存储到localStorage.setItem("lgc")

        return {
            gid: null,
            info: null,
            lgc:localStorage.getItem("lgc"),  // null 如果用户已经登录 ->存储的用户的登录信息(昵称 loginNick)
        }
    },
    methods: {
        getDetail() {
            axios.get("/searchGoodsByGoodsId.php",{ // 配置对象
                params:{  // params对象-> get传参
                  gid:this.gid,
               }
            }).then(response => {
                if (response.status == 200) {
                    return response.data;
                } else {
                    var err = new Error("Request Fail!");
                    // throw err;
                    return Promise.reject(err);
                }
            }).then(res => {
                console.log("商品详情成功", res);
                this.info = res.data;
            }).catch(err => {
                console.log("err", err);
            })
        },
        addToShoppingCar(){
            // 加入购物车
            // 1. 判断用户是否登录 
            //    a. 用户未登录  -> 去登录
            //    b. 用户已经登录  -> 调用接口加入购物车

            if(this.lgc){ // 已登录
                console.log("调用接口加入购物车");
            }else{  // 未登录 -> 去登录


                // 手搓版 -> 太low -> 没有必要.官方有提供
                // location.hash="#/login";


                // 编程式导航  router
                // console.log("router",this.$router);

                // 直接去登录页  -> 容易迷路
                // this.$router.push({name:"login"})

                // 去登录页 => 默认携带当前页面地址信息(this.$route.fullPath)

                // router.push()   跳转指定路由地址, 并添加一条新的历史记录
                // 列表 -> 详情页(没有登录) -> 登录 -> 详情页(已登录)
                // this.$router.push({name:"login",query:{ReturnUrl:this.$route.fullPath}})

                //  [列表,'详情页']
                 // 列表 -> 详情页(没有登录) -> 替换为登录 -> 替换为详情页(已登录)
                 this.$router.replace({name:"login",query:{ReturnUrl:this.$route.fullPath}})

            }

        }
    },
    watch:{
        /* $route:function(newVal,oldVal){
            console.log("$route改变了",newVal,oldVal);

            var { gid } = this.$route.params;
            this.gid = gid;

            this.getDetail();
        }, */


        "$route.params.gid":function(newVal,oldVal){
            console.log("gid改变了",newVal,oldVal);

            var { gid } = this.$route.params;
            this.gid = gid;

            this.getDetail();
        },
    },
    mounted() {
        console.log("Detail组件",this);
        console.log("route",this.$route);
        console.log("router",this.$router);

        console.log("params", this.$route.params);

        var { gid } = this.$route.params;
        this.gid = gid;

        this.getDetail();

    }
}

</script>


<style scoped>
    .info{
        padding: 0.2rem;
    }

    .info img{
        width: 100%;
    }


</style>
